<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes a1 {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.1);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>

</head>

<body>
    <script>
        document.onclick = function (e) {
         var   x = e.pageX;
         var   y = e.pagey;
            var r = Math.floor(Math.random() * 200) +100;
            var d1 = document.createElement("div");
            d1.style.width = r + "px";
            d1.style.height = r + "px";
            var c1 = Math.floor(Math.random() * 256);
            var c2 = Math.floor(Math.random() * 256);

            var c3 = Math.floor(Math.random() * 256);
            d1.style.background = "rgb("+c1+","+c2+","+c3+")";
            d1.style.position = "absolute";
            d1.style.left = x + "px";
            d1.style.top = y + "px";
            d1.style.animation = "a1 "+(Math.random()*3)+"s infinite"; 
            document.body.appendChild(d1);

  }





    </script>


</body>

</html>